<template>
    <el-container class="layout-container-demo" style="height: 100vh;width: 100vw;padding: 0;">
        <el-aside width="200px">
            <el-header style="text-align: right; font-size: 12px">


                <div class="toolbar">
                    <el-button style="position: absolute; left: 20%;" :icon="Bell" circle />
                    <el-dropdown>
                        <div class="block">
                            <el-avatar :size="50" :src="circleUrl" />
                        </div>
                        <template #dropdown>
                            <el-card class="box-card">
                                <template #header>
                                    <div class="card-header">
                                        <span>{{ nickName }}</span>
                                    </div>
                                </template>
                                <div>
                                    <div>
                                        <el-button type="text" @click="toUserInfo">个人中心</el-button>
                                    </div>
                                    <div>
                                        <el-button type="text" @click="toLogin">退出登录</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>

            <el-scrollbar>
                <el-menu>
                    <!-- 使用 v-for 循环渲染菜单项 -->
                    <router-link v-for="(menuItem, index) in menuList" :key="index" :to="{ name: menuItem.name }"
                        style="text-decoration: none;">
                        <el-menu-item :index="(index + 1).toString()">
                            <span>{{ menuItem.label }}</span>
                        </el-menu-item>
                    </router-link>
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <el-container>
            <el-main>
                <router-view style="height: 100%;" />
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { ref } from 'vue'
import { Bell, Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import require from '../require';
import { UserStore } from '../store/user';
import { useRouter } from 'vue-router'

const router = useRouter();

const userStore = UserStore();
const nickName = userStore.userInfo.nickName;
const menuList = [
    { name: 'Search', label: '搜索' },
    { name: 'Main', label: '首页' },
    { name: 'MyLibrary', label: '我的知识库' },
    { name: 'Follow', label: '我的关注' },
    { name: 'MyCollectionLibrary', label: '我的收藏知识库' },
    { name: 'MyCollectionArticle', label: '我的收藏文章' },
    { name: 'History', label: '浏览记录' },
];
const circleUrl = userStore.userInfo.avatarUrl;

const toUserInfo = () => {
    // 生成包含 query 参数的路由对象
    const r = router.resolve({
        name: 'UserInfo', // 文章详情页路由名
        query: {
            userId: userStore.userInfo.userId, // 文章 ID
        }
    });
    // 在新标签页打开路由链接
    window.open(r.href, '_blank')
}

const toLogin = () => {
    userStore.saveUser(null);
    router.push({ name: 'Login' })
}

</script>



<style scoped>
.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>
